<template>
    <div class="footer_box">
        <RouterLink v-for="(item, index) in navItems" :key="index" :to="item.path" @click="setActiveIndex(index)">
            <img :src="hl === index ? item.activeImg : item.inactiveImg" />
            {{ item.text }}
        </RouterLink>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import './footerNav.css';
import zhineng from '../../assets/images/zhineng.jpg';
import zhineng_active from '../../assets/images/zhineng-active.jpg';
import employment from '../../assets/images/employment.jpg';
import employment_active from '../../assets/images/employment-active.jpg';
import security from '../../assets/images/security.jpg';
import security_active from '../../assets/images/security-active.jpg';
import equipment from '../../assets/images/equipment.jpg';
import equipment_active from '../../assets/images/equipment-active.jpg';

const route = useRoute();
const hl = ref(0);

const navItems = [
    { path: '/test', text: '智能检测', inactiveImg: zhineng, activeImg: zhineng_active },
    { path: '/employment', text: '就业态势', inactiveImg: employment, activeImg: employment_active },
    { path: '/ecurity', text: '安防管理', inactiveImg: security, activeImg: security_active },
    { path: '/device', text: '设备运维', inactiveImg: equipment, activeImg: equipment_active }
];

const setActiveIndex = (index) => {
    hl.value = index;
};

watch(() => route.path, (newPath) => {
    const index = navItems.findIndex(item => item.path === newPath);
    if (index !== -1) {
        hl.value = index;
    }
}, { immediate: true });
</script>

<style></style>